<template>
    <Tabs v-model="tagname" @on-click="handleDetail">
        <TabPane label="按热度" name="view_time">
            <Carousel v-model="value1" loop v-if="viewRecommend">
                <CarouselItem v-for="items in viewRecommend" >
                    <Row :gutter="16" >
                    <Col span="6" v-for="item in items" >
                            <Card v-if="info.role_type == 4" style="height:200px">
                                <p slot="title"><a :href="src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                                <p>服务简介：{{item.service_content}}</p>
                            </Card>
                             <Card v-if="info.role_type == 5" style="height:200px">
                                <p slot="title"><a :href="demand_src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                               
                                <p>需求简介:{{item.demand_content}}</p>
                            </Card>
                        </Col>
                    </Row>
                </CarouselItem>
            </Carousel>
            <Row :gutter="16"  v-if="!viewRecommend">
                <Col span="6">
                    <Card  style="height:200px">
                        <p slot="title">暂无数据</p>
                        <p>暂无数据</p>
                    </Card>
                </Col>
            </Row>
        </TabPane>
        <TabPane label="按时间" name="create_time" >
            <Carousel v-model="value1" loop v-if="createRecommend">
                <CarouselItem v-for="items in createRecommend" >
                    <Row :gutter="16" >
                    <Col span="6" v-for="item in items">
                            <Card v-if="info.role_type == 4" style="height:200px">
                                <p slot="title"><a :href="src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                              
                                <p>服务简介：{{item.service_content}}</p>
                            </Card>
                             <Card v-if="info.role_type == 5" style="height:200px">
                                <p slot="title"><a :href="demand_src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                               
                                <p>需求简介:{{item.demand_content}}</p>
                            </Card>
                        </Col>
                    </Row>
                </CarouselItem>
            </Carousel>
            <Row :gutter="16"  v-if="!createRecommend">
                <Col span="6">
                    <Card  style="height:200px">
                        <p slot="title">暂无数据</p>
                        <p>暂无数据</p>
                    </Card>
                </Col>
            </Row>
        </TabPane>
        <TabPane label="按地区" name="area">
            <Carousel v-model="value1" loop v-if="areaRecommend" >
                <CarouselItem v-for="items in Recommend" >
                    <Row :gutter="16" >
                    <Col span="6" v-for="item in items" >
                            <Card v-if="info.role_type == 4" style="height:200px">
                                <p slot="title"><a :href="src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                              
                                <p>服务简介：{{item.service_content}}</p>
                            </Card>
                             <Card v-if="info.role_type == 5" style="height:200px">
                                <p slot="title"><a :href="demand_src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                               
                                <p>需求简介:{{item.demand_content}}</p>
                            </Card>
                        </Col>
                    </Row>
                </CarouselItem>
            </Carousel> 
            <Row :gutter="16"  v-if="!areaRecommend">
                <Col span="6">
                    <Card  style="height:200px">
                        <p slot="title">暂无数据</p>
                        <p>暂无数据</p>
                    </Card>
                </Col>
            </Row>
        </TabPane>
        <TabPane label="按类别" name="type" >
            <Carousel v-model="value1" loop v-if="typeRecommend">
                <CarouselItem v-for="items in typeRecommend" >
                    <Row :gutter="16">
                    <Col span="6" v-for="item in items">
                            <Card v-if="info.role_type == 4" style="height:200px">
                                <p slot="title"><a :href="src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                              
                                <p>服务简介：{{item.service_content}}</p>
                            </Card>
                             <Card v-if="info.role_type == 5" style="height:200px">
                                <p slot="title"><a :href="demand_src+item.id" :title="item.title" target="_blank">{{item.title}}</a></p>
                               
                                <p>需求简介:{{item.demand_content}}</p>
                            </Card>
                        </Col>
                    </Row>
                </CarouselItem>
            </Carousel>
            <Row :gutter="16"  v-if="!typeRecommend">
                <Col span="6">
                    <Card  style="height:200px">
                        <p slot="title">暂无数据</p>
                        <p>暂无数据</p>
                    </Card>
                </Col>
            </Row>
        </TabPane>
    </Tabs>
</template>
<script>
    import Page from '@/common/model/Page'

    export default {
        name: 'Recommend',    
        data () {
            return {
                value1:0,
                tagname:'',
                list: null,
                create: null,
                arealist: null,
                typelist: null,
                src: '/#/index/service_detail/',
                demand_src: '/#/index/demand_detail/'
            }
        },
        methods: {
            handleDetail(name){
                this.value1 = 0;
                if(name == "area"){
                    this.tagname = 'area';
                    this.api.post("service/recommend",{area: this.info.area, view_time: false, create_time: false, type: false}, res =>{
                        if(res.value && res.value == "noarea") return;
                         this.arealist = res.list; 
                    })
                }else if(name == "view_time"){
                    this.tagname = 'view_time';
                    this.api.post("service/recommend",{area: '', view_time: true, create_time: false, type: false}, res =>{
                        if(res.list.length != 0) this.list = res.list;
                        else this.list = null;
                    });
                }else if(name == "create_time"){
                    this.tagname = 'create_time';
                    this.api.post("service/recommend",{area: '', view_time: false, create_time: true, type: false}, res =>{
                        if(res.list.length != 0) this.create = res.list;
                        else this.create = null;
                    });
                }else if(name == "type"){
                    this.tagname = 'type';
                    this.api.post("service/recommend",{area: '', view_time: false, create_time: false, type: true}, res =>{
                        if(res.list.length != 0){this.typelist = res.list;}
                        else this.typelist = null;
                    });
                }
            },
            handle(listRecommend){
                var list = [];
                if(listRecommend == null) return;
                else{
                    for(var i = 0,len = listRecommend.length; i < len; i +=4){
                        list.push(listRecommend.slice( i, i + 4));
                    }
                    return list;
                } 
            }
        },
        computed:{
            info(){
                return this.$store.state.user.info;
            },
            areaRecommend(){
                var recommendList = [];
                if(this.arealist == null || this.arealist.length == 0) return;
                else{
                    for(var j = 0, len = this.arealist.length; j < len; j++){
                        for( var i = 0; i < this.arealist[j].length; i++){
                            recommendList.push(this.arealist[j][i]);
                        } 
                    }
                return recommendList;
                }
            },
            Recommend(){
               return this.handle(this.areaRecommend);
            },
            viewRecommend(){
                return this.handle(this.list);
            },
            createRecommend(){
               return this.handle(this.create);
            },
            typeRecommend(){
               return this.handle(this.typelist);
            }
        },
        created(){
            this.handleDetail("view_time");
        },
    }
</script>
